<template>
	<view class="eventList">
		<view class="list">
			<view class="list_tabs">
				<my-search @ok="searchOk" @blur="blur"></my-search>
			</view>

			<scroll-view class="list_box" scroll-y="true" @scrolltolower="onscrolltolower">
				<view class="list_item" v-for="(item,index) in list" :key="index" @click="handleClick(item,index)">
					<image :src="item.cover?fullImage(item.cover):fullImage(`../../static/train_defualt_img.png`)"
						mode=""></image>
					<view>
						<text>{{item.title}}</text>
						<text>{{'主讲：'+item.organizer+'|'+item.speaker}}</text>
						<view>
							<view>
								<image src="../../static/time_icon.png" mode=""></image>
								<text>{{item.statrtTime}}</text>
							</view>
							<text :style="`background:${options.status==0?'#423DD4':options.status==1?'#628FCB':'#a5a5b0'}`">{{item.status==0?'未开始':item.status==1?'进行中':'已结束'}}</text>
						</view>
					</view>
				</view>
				<uni-load-more iconType="auto" :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		gateway,
		getAction,
		fullImage
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				queryParam: {},
				list: [],
				status: 'more',
				pagetion: {
					total: 0,
					pageNo: 1,
				},
				url: {
					list: gateway.sysrural + '/village/sysLiveInfo/list',
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			fullImage,
			getList() {
				this.pagetion.pageNo = 1
				this.list = []
				getAction(this.url.list, {
					isShow: 1,
					pageNo: this.pagetion.pageNo,
					...this.queryParam
				}).then(res => {
					if (res.success) {
						this.list = res.result.records
						this.pagetion.total = res.result.total
						if (this.pagetion.total <= this.list.length) {
							this.status = 'noMore'
						}
					}
				})
			},
			//输入查询
			searchOk(val) {
				this.queryParam.title = val
				this.getList()
			},
			//输入查询
			blur(val) {
				this.queryParam.title = val
				this.getList()
			},
			handleClick(item) {
				uni.navigateTo({
					url: `/pages/train/detail?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			onscrolltolower(val) {
				if (this.pagetion.pageNo * 10 < this.pagetion.total) {
					this.status = 'loading'
					setTimeout(() => {
						this.pagetion.pageNo += 1
						postAction(this.url.list, {
							pageNo: this.pagetion.pageNo,
							...this.queryParam
						}).then(res => {
							this.list.push(...res.result.records)
						})
						this.status = 'more'
					}, 1000)
				} else {
					this.status = 'noMore'
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.eventList {
		width: 100%;

		.list {
			width: 100%;
			padding: 28upx;

			>.list_tabs {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 28upx;

				.uni-select {
					border-radius: 40upx;
				}
			}

			>.list_box {
				height: calc(100vh - 238upx);
				overflow-y: auto;

				.list_item {
					width: 100%;
					background: #fff;
					border-radius: 16upx;
					margin-bottom: 28upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>image {
						width: 210upx;
						height: 210upx;
						border-radius: 18upx;
						margin-right: 28upx;
					}

					>view {
						flex: 1;
						padding: 28upx;
						line-height: 58upx;

						>text {
							display: block;

							&:nth-of-type(1) {
								font-size: 28upx;
								color: #333333;
								font-weight: 600;
							}

							&:nth-of-type(2) {
								font-size: 22upx;
								color: #666666;
							}
						}

						>view {
							display: flex;
							justify-content: space-between;
							align-items: center;

							>text {
								display: inline-block;
								width: 88upx;
								height: 38upx;
								border-radius: 18upx;
								color: #FFFFFF;
								font-size: 20upx;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							>view {
								>image {
									width: 22upx;
									height: 22upx;
								}

								>text {
									font-size: 22upx;
									color: #999999;
									margin-left: 18upx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>